<template>
	<view class="Commodity">
		<statusBar />
       <statusBar />

		<!-- 设置 -->
		<view class="nav" @tap="leftIndex">
			<image src="../../static/setup/jiantou.png" mode=""></image>
			<view>商品-编辑-商品属性</view>
		</view>

		<view class="search">
			<view class="attributes" v-for="(item,index) in List" :key="index">
				<view>
					<view>属性名</view>
					<input v-model="item.propertyName" type="text" value="" placeholder="请填写,如甜度,辣度" />
				</view>
				<view>
					<view>属性选项</view>
					<view>
						<view v-for="i in 1"><input type="text" value="" placeholder="填写属性" /></view>
					</view>
				</view>
				<view @tap="deleteItem(index)">删除该属性</view>
			</view>
		</view>
		<!-- 保存 -->
		<view class="new">
			<view @click="createInput">新建规格</view>
			<view>保存设置</view>
		</view>
		
		
	</view>
</template>
<script>
import statusBar from '../../components/statusBar/statusBar.vue';
export default {
	data() {
		return {
			List:[
				{propertyName:""}
			],
			
		};
	},
	components: {
		statusBar
	},
	methods: {
		leftIndex() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 新增
		createInput() {
			this.List.push({ propertyName: '' });
		},
		// 删除
		deleteItem(index){
			 this.List.splice(index, 1)
			  console.log(index)
		}
	}
};
</script>
<style lang="scss" scoped>
.Commodity {
	padding-bottom: 100upx;
	.nav {
		display: flex;
		align-items: center;
		padding: 50upx 30upx 30upx 30upx;
		background: $bg1-color;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;

		image {
			width: 27upx;
			height: 30upx;
			display: flex;
		}
		& > view {
			font-size: 34upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: $bg2-color;
			margin-left: 30upx;
		}
	}
	.search {
		// 微信小程序
		/* #ifdef  MP-WEIXIN */

		// padding-top: 80upx;
		/* #endif */
		// 手机端
		/* #ifdef APP-PLUS */
		// padding-top: 80upx;
		/* #endif */
		// H5端
		/* #ifdef  H5 */
		padding-top: 100upx;
		/* #endif */
		.attributes {
			background: #ffffff;
			margin-top: 41upx;
			border: 1upx solid #edeff9;
			padding: 0upx 31upx 40upx 40upx;
			& > view:nth-child(1) {
				display: flex;
				align-items: center;
				border-bottom: 1upx solid #edeff9;
				padding-bottom: 36upx;
				padding-top: 36upx;
				& > view {
					font-size: 32upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
				input {
					margin-left: 107upx;
				}
			}
			& > view:nth-child(2) {
				display: flex;
				align-items: center;
				border-bottom: 1upx solid #edeff9;
				padding-bottom: 36upx;
				padding-top: 36upx;
				& > view:nth-child(1) {
					width: 21%;
					font-size: 32upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
				& > view:nth-child(2) {
					width: 80%;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					margin-left: 45upx;
					& > view {
						padding: 10upx;
					}
					input {
						width: 120upx;
						background: rgba(243, 243, 245, 1);
						border-radius: 33upx;
						font-size: 28upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: rgba(101, 101, 101, 1);
						padding: 15upx;
					}
				}
			}
		    // 删除
            &>view:nth-child(3){
				font-size:32upx;
				font-family:Source Han Sans CN;
				font-weight:400;
				color:rgba(227,75,75,1);
				text-align: center;
				padding-top: 40upx;
			}
		}
	}
	
	
	.new {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 41upx 125upx 41upx 125upx;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		right: 0;
		& > view:nth-child(1) {
			font-size: 32upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(240, 147, 0, 1);
		}
		& > view:nth-child(2) {
			font-size: 32upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(53, 57, 76, 1);
		}
	}
}
</style>
